<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/eui.css">
  <style>
    body{
      margin: 0;
      background-size: cover; /*cover是专门用来设置背景全屏的样式*/
    }
    #app{
      text-align: center;
    }
    h1{
      font-size: 72px;
      color: rgb(0,150,215);
      margin-bottom: 0;
    }
    img{
      width: 100px;
    }
    h2{
      font-size: 32px;
      color: #0095d7;
      margin: 0;
    }
    #reg{
      width: 333px;
    }
    a{text-decoration:none}

    h3{
      color: #333;
      font-weight: 500;
    }

    el-input{
      padding-left: 500px;
    }
    .el-input__inner{
      padding: 0 40px;
    }
    .bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -5;
      object-fit: cover;
    }
    .el-page-header__content{
        margin: auto;
    }
  </style>
</head>
<body>
<video src="images/992.mp4" class="bjimg" autoplay loop muted>
  <source src="images/992.mp4" type=""/>
</video>

<div id="app">
  <div style="background-color: #0ccab6">
      <a href="/"><el-page-header @back="goBack" content="欢迎来到金猫银猫商城,请登录" style=";padding: 20px 20px;"></el-page-header></a>
  </div>
    <div>
        <el-card style="width: 450px;height: 333px;margin: 100px auto;margin-right: 160px;
  background-color: rgba(255,255,255,0.3)">
            <el-form style="width: 400px;margin-bottom: 60px"  label-width="60px">
                <div>
                    <h3 align="left" style="margin-left: 33px" >
                        <a href="/login.html" style="margin-right: 15px;color: black" >登录</a>
                        <a href="/reg.html" style="margin-right: 15px;color: black" >注册</a>
                    </h3>
                </div>


                <el-form-item>
                    <div >
                        <el-input  type="text" v-model="user.username"
                                   placeholder="请输入用户名"  style=";margin-left: -60px;border: 0px;position: relative;"></el-input>
                        <i class="el-icon-user-solid" style="position: absolute;margin-left: -328px;margin-top: 13px"></i>
                    </div>
                </el-form-item>


                <el-form-item>
                    <el-input type="password" v-model="user.password"
                              placeholder="请输入密码"style="margin-left: -60px"></el-input>
                    <i class="el-icon-s-cooperation" style="position: absolute;margin-left: -328px;margin-top: 13px"></i>
                </el-form-item>

                <el-form-item>
                    <el-input type="nick" v-model="user.nick"
                              placeholder="请输入昵称"style="margin-left: -60px"></el-input>
                    <i class="el-icon-user" style="position: absolute;margin-left: -328px;margin-top: 13px"></i>
                </el-form-item>



                <el-form-item>
                    <el-button type="primary" @click="reg()" id="reg" style="margin-left: -60px;">注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</div>
<div class="copyright" style="line-height: 30px;margin: 275px 0 20px 0 ;border-top: solid 2px #0ccab6 ; color: #555; ">
    <p class="copy wrap" style="margin-left: 100px">
        <a href="#">关于金猫银猫</a>
        <a href="#">帮助中心</a>
        <a href="#">诚聘英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站合作</a>
        <a href="#">法律声明</a>
        <a href="#">廉政举报</a><br>
        <a href="#">京东商城</a> |
        <a href="#">中国白银网</a> |
        <a href="#">央视网</a> |
        <a href="#">1号店</a> |
        <a href="#">京东商城</a> |
        <a href="#">中国白银网</a> |
        <a href="#">央视网</a> |
        <a href="#">1号店</a> <br>

        <a href="http://www.csmall.com/help.do?page=help_help_icp" target="_blank"  >中国增值电信业务经营许可证 B2-20140169号</a>
        <span style="line-height:1.5;"> | <br>
            ©2014深圳银瑞吉文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span>
        <span class="powerby">技术支持：<a href="http://www.jentian.com/" target="_blank" title="广东井田云科技有限公司">井田云</a>
                        <br>
                    </span>
    </p>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        user:{
          username:"",
          password:"",
          nick:""
        }
      }
    },
    methods:{
        reg(){
            //得到form表单里面的数据
            // let data = new FormData(document.querySelector("form"));
            // console.log("data--:"+ data);
            let data = this.user;
            console.log("data--:"+ data);
            //发出注册的异步请求
            axios.post("/index/reg",data).then(function (response) {
                if (response.data==1){
                    alert("注册成功!");
                    location.href = "/login.html";//跳转到首页
                }else{
                    alert("用户名已存在!");
                }
            })
        },
      goBack() {
        console.log('fan');
      }
    }
  })
</script>
</html>